<template>
    <div class="app-container" v-loading="loading">
        <div class="container" >
        <el-form ref="searchForm" :model="searchForm" inline>
            <el-form-item label="设备编号/资产编号:">
                <el-col :span="6">
                    <el-input v-model="searchForm.text" clearable style="width:300px;"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="店铺:">
                <el-select v-model="searchForm.storeId" filterable clearable placeholder="请选择">
                    <el-option v-for="item in storeList" :key="item.value" :label="item.value + '——' + item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="省份">
                <el-select v-model="searchForm.provinceValue" filterable clearable @change="provinceChange"
                    placeholder="请选择省份">
                    <el-option v-for="item in provinceList" :key="item.value" :label="item.text" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="市">
                <el-select v-model="searchForm.cityValue" filterable clearable @change="cityChange" placeholder="请选择市">
                    <el-option v-for="item in cityList" :key="item.value" :label="item.text" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="区县">
                <el-select v-model="searchForm.regionValue" filterable clearable @change="regionchange"
                    placeholder="请选择市">
                    <el-option v-for="item in regionList" :key="item.value" :label="item.text" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址:">
                <el-col :span="6">
                    <el-input v-model="searchForm.address" clearable style="width:300px;"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="组织一级" v-if="this.$store.state.user.level <= 1">
                <el-select v-model="searchForm.userId" clearable filterable placeholder="请选择" :disabled="showOneLevel"
                    @change="selectChange(1)">
                    <el-option v-for="item in oneLevelUserInfoList" :key="item.id" :label="item.nickname"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="组织二级" v-if="this.$store.state.user.level <= 2">
                <el-select v-model="searchForm.twoUserId" filterable clearable placeholder="请选择"
                    :disabled="showTwoLevel" @change="selectChange(2)">
                    <el-option v-for="item in twoLevelUserInfoList" :key="item.id" :label="item.nickname"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="组织三级" v-if="this.$store.state.user.level <= 3">
                <el-select v-model="searchForm.threeUserId" filterable clearable placeholder="请选择"
                    :disabled="showThreeLevel" @change="selectChange(3)">
                    <el-option v-for="item in threeLevelUserInfoList" :key="item.id" :label="item.nickname"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="组织四级" v-if="this.$store.state.user.level <= 4">
                <el-select v-model="searchForm.fourUserId" filterable clearable placeholder="请选择"
                    :disabled="showFourLevel" @change="selectChange(4)">
                    <el-option v-for="item in fourLevelUserInfoList" :key="item.id" :label="item.nickname"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="组织五级" v-if="this.$store.state.user.level <= 5">
                <el-select v-model="searchForm.fiveUserId" filterable clearable placeholder="请选择"
                    :disabled="showFiveLevel" @change="selectChange(5)">
                    <el-option v-for="item in fiveLevelUserInfoList" :key="item.id" :label="item.nickname"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="组织六级" v-if="this.$store.state.user.level <= 6">
                <el-select v-model="searchForm.sixUserId" filterable clearable placeholder="请选择"
                    :disabled="showSixLevel" @change="selectChange(6)">
                    <el-option v-for="item in sixLevelUserInfoList" :key="item.id" :label="item.nickname"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>




            <el-form-item>
                <el-button
                    style="margin-left:5px;background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none"
                    type="primary" icon="el-icon-search" size="mini" @click="queryByForm">检索</el-button>
            </el-form-item>
            <!-- <el-form-item>
          <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="importAssetcode"
          >导入资产编号 (Excel)</el-button
          >
        </el-form-item> -->

            <el-form-item>
                <!-- <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue" filename="冷柜资产" buttonName="数据导出">
                </ExportExcel> -->
            </el-form-item>
        </el-form>

        <el-table ref="deviceTable" :data="devicesData" style="width: 100%" @selection-change="handleSelectionChange()" 
            row-key="id">
            <el-table-column type="selection" width="55" :reserve-selection="true" :key="itemKey">
            </el-table-column>
            <el-table-column label="项目名称" prop="projectName" align="center"></el-table-column>
            <el-table-column label="资产编号" prop="assetCode" align="center">
                <template slot-scope="scope">
                    <el-popover placement="top" width="180" trigger="hover">
                        <p>设备id ：{{ scope.row.deviceId }}</p>
                        <p>设备名称：{{ scope.row.deviceName }}</p>
                        <span slot="reference">{{ scope.row.assetCode || '暂未绑定' }}</span>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column label="运营周期" prop="operateLife" align="center" width="110"></el-table-column>
            <el-table-column label="温控sn" prop="thermostatSn" align="center"></el-table-column>
            <el-table-column label="相机sn" prop="cameraSn" align="center"></el-table-column>
            <el-table-column label="运行状态" prop="status" align="center">

                <template slot-scope="scope">
                    {{ scope.row.status == 'ONLINE' ? '在线' : '离线' }}
                </template>
            </el-table-column>
            <el-table-column label="告警" prop="alarmStatus" align="center" width="110">

                <template slot-scope="scope">
                    <div>
                        <div v-if="scope.row.alarmList.length > 0" style="color:red">有</div>
                        <div v-else style="color:green">无</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="告警信息" prop="alarmList" align="center" width="110">

                <template slot-scope="scope">
                    <div v-for="(index, item) in scope.row.alarmList" :key="index">
                        <div>{{ (item + 1) + '.' + index }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="店铺名称" prop="storeName" align="center">

                <template slot-scope="scope">
                    <div>
                        <el-popover trigger="hover" placement="bottom" width="400">
                            <p>门店编号：{{ scope.row.storeCode }}</p>
                            <p>店长名称：{{ scope.row.storeManagerName }}</p>
                            <p>店长联系方式：{{ scope.row.storeManagerPhone }}</p>
                            <span slot="reference">{{ scope.row.storeName || '门店未绑定' }}</span>
                        </el-popover>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="国家" prop="country" align="center"></el-table-column>
            <el-table-column label="省" prop="province" align="center"></el-table-column>
            <el-table-column label="市" prop="city" align="center"></el-table-column>
            <el-table-column label="区" prop="district" align="center"></el-table-column>
            <el-table-column label="地址" prop="address" align="center"></el-table-column>
            <!-- <el-table-column label="邮政编码" prop="postcode" align="center"></el-table-column> -->
            <el-table-column label="位置偏移" prop="pianli" align="center">

                <template slot-scope="scope">
                    <div>
                        <el-popover trigger="hover" placement="bottom" width="400">
                            <span slot="reference">{{ scope.row.pianli === false ? '正常' : '偏离' }}</span>
                        </el-popover>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="组织一级" prop="oneLevelParentName" align="center"></el-table-column>
            <el-table-column label="组织二级" prop="twoLevelParentName" align="center"></el-table-column>
            <el-table-column label="组织三级" prop="threeLevelParentName" align="center"></el-table-column>
            <el-table-column label="组织四级" prop="fourLevelParentName" align="center"></el-table-column>
            <el-table-column label="组织五级" prop="fiveLevelParentName" align="center"></el-table-column>
            <el-table-column label="组织六级" prop="sixLevelParentName" align="center"></el-table-column>
            <el-table-column label="业代信息" prop="storeName" align="center">

                <template slot-scope="scope">
                    <div>
                        <el-popover trigger="hover" placement="bottom" width="400">
                            <p>业代编号：{{ scope.row.user.id }}</p>
                            <p>业代等级：{{ scope.row.user.level || '无' }}</p>
                            <p>业代上级编号：{{ scope.row.user.parentId || '无' }}</p>
                            <span slot="reference">{{ scope.row.user.username || '无' }}</span>
                        </el-popover>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="业代账号" prop="operatingCycle" align="center"></el-table-column>
        <el-table-column label="业代手机" prop="operatingCycle" align="center"></el-table-column> -->
        </el-table>
        <!-- <div class="page">
            <div style="margin-right: 20px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">共7条</div>
            <el-button type="text" style="color:#333;margin-right: 10px;"><</el-button>
                    <div class="pageborder">1</div>
                    <el-button type="text" style="color:#333;margin-right: 10px;">></el-button>
                    <div style="margin-right: 10px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">前往</div>
                    <el-input type="number" style="width: 60px;margin-right: 10px;" :min="0" v-model="pageIndex" />
                    <div style="color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">页</div>
            </div> -->
        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
            :page-sizes="[10, 20, 50, 100, 200, 500, 1000, 2000, 3000]" @pagination="pagination" />
        <!-- 资产编号上传 -->
        <!-- <el-dialog
        title="导入资产编号"
        v-loading="importLoading"
        element-loading-text="请上传excel表格"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :visible.sync="importDialogOpen"
        :close-on-click-modal="false"
        @close="cancelImport"
        width="800px"
        append-to-body
      >
        <el-form
          label-width="150px"
        >
        <el-row>
            <el-col :span="24">
              <el-form-item label="导出模板" >
                <ExportExcel :list="exportList" :tHeader="oHeader" :tValue="oValue" filename="导入模板下载">excel导出</ExportExcel>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="请上传excel文件：" >
                <input type="file"  @change="handFileChange"  />
              </el-form-item>
            </el-col>
          </el-row>
  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelImport" >取 消</el-button>
          <el-button type="primary" @click="submit" >确 定</el-button>
        </div>
      </el-dialog> -->


</div>
    </div>
</template>

<script>
//   import ExportExcel from '../../../components/ExcelUtils/Export2Excel.vue'
//   import { userListPageAll } from '@/api/user'
//   import initCust from '@/plugins/mixin'
//   import AllAddress from '@/plugins/data.js'
//   import { importAssetCode2 } from '@/api/device/masterDevice.js'
//   import { getAssetData } from '@/api/dataCenter/index.js'
//   import { viewParents } from '@/api/user/index.js'
const emumStatus = {
    ONLINE: '在线',
    OFFLINE: '离线',
    UNACTIVE: '设备未激活',
    UNKNOWN: '未知',
    DISABLE: '已禁用',
}
export default {
    // mixins: [initCust],
    // components: {
    //   ExportExcel
    // },
    data() {
        return {
            itemKey: 0,
            // 分页相关数据
            total: 0,
            pageNum: 1,
            pageIndex:1,
            pageSize: 20,
            devicesData: [],//表格数据
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            excelFile: '',
            importDialogOpen: false,
            importLoading: false,
            exportList: [],
            tHeader: ['冰柜资产码', 'Hub序列号', '运营周期', '运行状态', '告警', '告警信息', '店铺名称', '店铺编码', '国家', '省', '市', '区', '地址',
                '位置偏移', '店主', '店主联系方式', '组织一级', '组织二级', '组织三级', '组织四级', '组织五级', '组织六级', '温控sn', '相机sn', '项目名称'],
            tValue: ['assetCode', 'deviceId', 'operateLife', 'status', 'alarmStatu', 'alarmList', 'storeName', 'storeCode', 'country', 'province', 'city', 'district', 'address',
                'pianli', 'storeManagerName', 'storeManagerPhone', 'oneLevelParentName', 'twoLevelParentName', 'threeLevelParentName', 'fourLevelParentName', 'fiveLevelParentName', 'sixLevelParentName', 'thermostatSn', 'cameraSn', 'projectName'],
            oHeader: ['产品编号', 'cpuid', '资产编号'],
            oValue: ['123', '123', '123'],
            // 店铺相关
            storeList: [],
            // 省市区相关
            province: '',
            city: '',
            region: '',
            provinceValue: '',
            cityValue: '',
            regionValue: '',
            provinceList: [],
            cityList: [],
            regionList: [],
            // 用户相关
            oneLevelUserInfoList: [],
            twoLevelUserInfoList: [],
            threeLevelUserInfoList: [],
            fourLevelUserInfoList: [],
            fiveLevelUserInfoList: [],
            sixLevelUserInfoList: [],
            paramId: '',
            showOneLevel: true,
            showTwoLevel: true,
            showThreeLevel: true,
            showFourLevel: true,
            showFiveLevel: true,
            showSixLevel: true,
            timeDimensionList: [
                {
                    value: 1,
                    label: '日'
                },
                {
                    value: 2,
                    label: '周'
                },
                {
                    value: 3,
                    label: '月'
                },
                {
                    value: 4,
                    label: '季度'
                }
            ],
            loading: false,
            searchForm: {
                text: '',  //设备编号 或 资产编号
                storeId: '',  //店铺id
                userId: '',  //用户id
                twoUserId: '',
                threeUserId: '',
                fourUserId: '',
                fiveUserId: '',
                sixUserId: '',
                province: '',  //省
                city: '',  // 市
                region: '',  //区
                location: ''  //地址
            }
        }
    },
    filters: {
        statusFilter(value) {
            return emumStatus[value] || '-'
        },
        filterDoorType(value) {
            console.log('@@ value ==>', value)
            const doorMap = {
                1: '左开门',
                2: '右开门',
                3: '双开门',
            }
            return doorMap[value]
        },
    },
    watch: {
        'addContainerForm.userId': function (val, old) {
            if (val === '') {
                this.addContainerForm.skuComposeId = ''
                return
            }
            this.getSkuComposeList()
            console.log('## value userId ==> ', val, this)
        },
    },
    created() {
        // this.getUserListInfo()  // 加载用户信息
        // this.loadPrivinceData() // 加载省份数据
    },
    mounted() {

    },
    computed: {

    },
    methods: {
        /** 获取用户列表 */
        getUserListInfo() {
            userListPageAll().then((res) => {
                if (res.code === 0 && res.data.length > 0) {
                    this.oneLevelUserInfoList = res.data
                    console.log("全部用户信息为", res)
                }
            }).finally(() => {
                if (this.$store.state.user.level === 1) {
                    if (this.$store.state.user.id === 1) {
                        this.showOneLevel = false
                    } else {
                        this.showTwoLevel = false
                    }
                    this.searchForm.userId = this.$store.state.user.id
                    this.selectChange(1)
                } else if (this.$store.state.user.level === 2) {
                    this.showThreeLevel = false
                    this.searchForm.twoUserId = this.$store.state.user.id
                    this.selectChange(2)
                } else if (this.$store.state.user.level === 3) {
                    this.showFourLevel = false
                    this.searchForm.threeUserId = this.$store.state.user.id
                    this.selectChange(3)
                } else if (this.$store.state.user.level === 4) {
                    this.showFiveLevel = false
                    this.searchForm.fourUserId = this.$store.state.user.id
                    this.selectChange(4)
                } else if (this.$store.state.user.level === 5) {
                    this.showSixLevel = false
                    this.searchForm.fiveUserId = this.$store.state.user.id
                    this.selectChange(5)
                } else {
                    this.searchForm.sixUserId = this.$store.state.user.id
                    this.selectChange(6)
                }
                this.getListData()
            })
        },
        handFileChange(e) {
            console.log(e)
            let fileData = e.target.files[0] //这是我们上传的文件
            this.excelFile = fileData
            console.log('@@ ee => ', this.excelFile)
        },
        submit() {
            if (this.excelFile) {
                console.log("传入的excel文件为", this.excelFile)
                const formData = new FormData()
                formData.append('file', this.excelFile)
                const param = {
                    file: formData
                }
                importAssetCode2(param).then((res) => {
                    if (res.code === 0) {
                        this.$message.success("资产编码文件导入成功！")
                        this.importDialogOpen = false
                        this.getListData()
                        this.excelFile = ''
                    }
                    console.log(res)
                }).catch((err) => {
                    console.log(err)
                    if (err.code === 1) {
                        this.$message.error('执行失败，原因：' + err.message)
                    } else if (err.code === 2) {
                        this.$message.error('token错误，需要重新登陆。原因：' + err.message)
                    } else if (err.code === -1) {
                        this.$message.error('服务端错误，原因：' + err.message)
                    }
                })
            } else {
                // this.$message.error('验证码错误')
                this.$message.error('请先上传文件')
            }

        },
        cancelImport() {
            this.importDialogOpen = false
            this.excelFile = ''
        },
        /** 导入资产编号 */
        importAssetcode() {
            this.importDialogOpen = true
        },
        //表格全选事件
        handleSelectionChange() {
            console.log("选中的数据", this.$refs.deviceTable.selection)
            this.exportList = this.$refs.deviceTable.selection
        },
        getColorMap(value) {
            // 在线 绿色   不在线红色  未激活黄色
            // emumStatus.ONLINE
            // emumStatus.OFFLINE
            // emumStatus.UNACTIVE
            let color = 'c-grey'
            switch (value) {
                case 'ONLINE':
                    color = 'c-green'
                    break
                case 'OFFLINE':
                    color = 'c-red'
                    break
                case 'UNACTIVE':
                    color = 'c-yellow'
                    break
                default:
                    break
            }
            return color
        },
        //搜索框用户选择改变
        selectChange(level) {
            if (level === 1) {
                this.searchForm.twoUserId = ''
                this.searchForm.threeUserId = ''
                this.searchForm.fourUserId = ''
                this.searchForm.fiveUserId = ''
                this.searchForm.sixUserId = ''
                this.showSixLevel = true
                this.showTwoLevel = true
                this.showThreeLevel = true
                this.showFourLevel = true
                this.showFiveLevel = true
                // this.paramId = this.searchForm.userId
                for (var i = 0; i < this.oneLevelUserInfoList.length; i++) {
                    // if(this.paramId === this.oneLevelUserInfoList[i].id){
                    if (this.oneLevelUserInfoList[i].subUsers.length > 0) {
                        this.twoLevelUserInfoList = this.oneLevelUserInfoList[i].subUsers
                        this.showTwoLevel = false
                    }
                    // }
                }
                console.log(this.twoLevelUserInfoList)
                console.log(this.twoLevelUserInfoList)
            } else if (level === 2) {
                this.searchForm.threeUserId = ''
                this.searchForm.fourUserId = ''
                this.searchForm.fiveUserId = ''
                this.searchForm.sixUserId = ''
                this.showSixLevel = true
                this.showThreeLevel = true
                this.showFourLevel = true
                this.showFiveLevel = true
                // this.paramId = this.searchForm.twoUserId
                for (var i = 0; i < this.twoLevelUserInfoList.length; i++) {
                    // if(this.paramId === this.twoLevelUserInfoList[i].id){
                    if (this.twoLevelUserInfoList[i].subUsers.length > 0) {
                        this.threeLevelUserInfoList = this.twoLevelUserInfoList[i].subUsers
                        this.showThreeLevel = false
                    }
                    // }
                }
            } else if (level === 3) {
                this.searchForm.fourUserId = ''
                this.searchForm.fiveUserId = ''
                this.searchForm.sixUserId = ''
                this.showSixLevel = true
                this.showFourLevel = true
                this.showFiveLevel = true
                // this.paramId = this.searchForm.threeUserId
                for (var i = 0; i < this.threeLevelUserInfoList.length; i++) {
                    // if(this.paramId === this.threeLevelUserInfoList[i].id){
                    if (this.threeLevelUserInfoList[i].subUsers.length > 0) {
                        this.fourLevelUserInfoList = this.threeLevelUserInfoList[i].subUsers
                        this.showFourLevel = false
                    }
                    // }
                }
            } else if (level === 4) {
                this.searchForm.fiveUserId = ''
                this.searchForm.sixUserId = ''
                this.showSixLevel = true
                this.showFiveLevel = true
                // this.paramId = this.searchForm.fourUserId
                for (var i = 0; i < this.fourLevelUserInfoList.length; i++) {
                    // if(this.paramId === this.fourLevelUserInfoList[i].id){
                    if (this.fourLevelUserInfoList[i].subUsers.length > 0) {
                        this.fiveLevelUserInfoList = this.fourLevelUserInfoList[i].subUsers
                        this.showFiveLevel = false
                    }
                    // }
                }
            } else if (level === 5) {
                this.searchForm.sixUserId = ''
                this.showSixLevel = true
                // this.paramId = this.searchForm.fiveUserId
                for (var i = 0; i < this.fiveLevelUserInfoList.length; i++) {
                    // if(this.paramId === this.fiveLevelUserInfoList[i].id){
                    if (this.fiveLevelUserInfoList[i].subUsers.length > 0) {
                        this.sixLevelUserInfoList = this.fiveLevelUserInfoList[i].subUsers
                        this.showSixLevel = false
                    }
                    // }
                }
            }
            //最后强制刷新
            this.$forceUpdate();
        },
        formatDate(cellValue) {
            if (cellValue == null || cellValue == "") return "";
            var date = new Date(cellValue * 1000)
            var year = date.getFullYear()
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
            var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
        },
        formateTime(time) {
            let formate = new Date(time * 1000)
            return formate
        },
        regionchange(e) {
            if (this.searchForm.regionValue != '' || this.searchForm.regionValue === 0) {
                this.region = this.regionList[this.searchForm.regionValue].text
                this.$forceUpdate()
            } else {
                this.region = ''
            }

        },
        cityChange(e) {
            //初始化数据
            this.regionList = []
            this.region = ''
            this.searchForm.regionValue = ''
            if (this.searchForm.cityValue != '' || this.searchForm.cityValue === 0) {
                this.city = this.cityList[this.searchForm.cityValue].text
                var i = 0
                this.regionList = AllAddress[this.searchForm.provinceValue].city[this.searchForm.cityValue].county.map(obj => {
                    return {
                        value: i++,
                        text: obj.countyName,
                    }
                })
            } else {
                this.city = ''
            }

        },
        provinceChange(e) {
            //初始化数据
            this.cityList = []
            this.city = ''
            this.searchForm.cityValue = ''
            this.regionList = []
            this.region = ''
            this.searchForm.regionValue = ''

            if (this.searchForm.provinceValue != '' || this.searchForm.provinceValue === 0) {
                this.province = this.provinceList[this.searchForm.provinceValue].text
                //获取市数据
                var i = 0
                this.cityList = AllAddress[this.searchForm.provinceValue].city.map(obj => {
                    return {
                        value: i++,
                        text: obj.cityName,
                    }
                })
            } else {
                this.province = ''
            }
            console.log(this.searchForm.provinceValue)
            console.log(this.province)
        },
        //省份数据加载
        loadPrivinceData() {
            var i = 0
            this.provinceList = AllAddress.map(obj => {
                return {
                    value: i++,
                    text: obj.provinceName,
                }
            })
        },
        pagination() {
            // if (this.total > this.pageNum * this.pageSize) {
            //   this.pageNum += 1
            //   this.getListData()
            // }
            this.getListData()
        }, // 分页查询
        handleUploadSuccess(response, file, fileList) {
            console.log('## response ==>', response)
            if (response.success) {
                this.addContainerForm.imageUrl = response?.data
            } else {
                this.$message.error(response.message || '上传图片失败')
            }
        },
        handleUploadError(err, file, fileList) {
            console.log('## handleUploadError', err)
            this.$message.error(err.message || '上传图片失败')
        },
        queryByForm() {
            this.pageNum = 1;
            this.getListData()
        },
        // 获取 冰柜 货柜列别数据
        getListData() {
            let bingdingUserId
            // 绑定要查找的用户id
            if (this.searchForm.sixUserId != '') {
                bingdingUserId = this.searchForm.sixUserId
            } else if (this.searchForm.fiveUserId != '') {
                bingdingUserId = this.searchForm.fiveUserId
            } else if (this.searchForm.fourUserId != '') {
                bingdingUserId = this.searchForm.fourUserId
            } else if (this.searchForm.threeUserId != '') {
                bingdingUserId = this.searchForm.threeUserId
            } else if (this.searchForm.twoUserId != '') {
                bingdingUserId = this.searchForm.twoUserId
            } else {
                bingdingUserId = this.searchForm.userId
            }
            const params = {
                pageIndex: this.pageNum - 1,
                pageSize: this.pageSize,
                text: this.searchForm.text,
                storeId: this.searchForm.storeId,
                userId: bingdingUserId,
                province: this.province,
                city: this.city,
                district: this.region,
                address: this.searchForm.address
            }
            getAssetData(params).then((res) => {
                console.log("表格结果为", res)
                this.devicesData = res.data.data
                this.total = res.data.totalCount
                // 转换设备告警列表
                for (var i = 0; i < this.devicesData.length; i++) {
                    for (var j = 0; j < this.devicesData[i].alarmList.length; j++) {
                        if (this.devicesData[i].alarmList[j] == 'E10') {
                            this.devicesData[i].alarmList[j] = '无电池'
                        } else if (this.devicesData[i].alarmList[j] == 'E11') {
                            this.devicesData[i].alarmList[j] = '灯控异常'
                        } else if (this.devicesData[i].alarmList[j] == 'E12') {
                            this.devicesData[i].alarmList[j] = '压仓温传感器异常'
                        } else if (this.devicesData[i].alarmList[j] == 'E13') {
                            this.devicesData[i].alarmList[j] = '环温传感器异常'
                        } else if (this.devicesData[i].alarmList[j] == 'E14') {
                            this.devicesData[i].alarmList[j] = '压仓温高温报警'
                        } else if (this.devicesData[i].alarmList[j] == 'E15') {
                            this.devicesData[i].alarmList[j] = '压仓温低温报警'
                        } else if (this.devicesData[i].alarmList[j] == 'R1') {
                            this.devicesData[i].alarmList[j] = '压缩机继电器异常'
                        } else if (this.devicesData[i].alarmList[j] == 'R2') {
                            this.devicesData[i].alarmList[j] = '加热器继电器异常'
                        } else if (this.devicesData[i].alarmList[j] == 'R3') {
                            this.devicesData[i].alarmList[j] = '蒸发风机继电器异常'
                        } else if (this.devicesData[i].alarmList[j] == 'R4') {
                            this.devicesData[i].alarmList[j] = '冷凝风机继电器异常'
                        } else if (this.devicesData[i].alarmList[j] == 'R5') {
                            this.devicesData[i].alarmList[j] = '灯箱继电器异常'
                        } else if (this.devicesData[i].alarmList[j] == 'D1') {
                            this.devicesData[i].alarmList[j] = '开门超时或门磁异常'
                        } else if (this.devicesData[i].alarmList[j] == 'E1') {
                            this.devicesData[i].alarmList[j] = '柜温探头异常'
                        } else if (this.devicesData[i].alarmList[j] == 'rH') {
                            this.devicesData[i].alarmList[j] = '柜温超上限报警'
                        } else if (this.devicesData[i].alarmList[j] == 'rL') {
                            this.devicesData[i].alarmList[j] = '柜温超下限报警'
                        }
                    }
                    let temp = i
                    if (this.devicesData[i].user.level === 1) {
                        this.devicesData[i].oneLevelParentName = this.devicesData[i].user.nickname
                    } else {
                        if (this.devicesData[i].user.level === 2) {
                            this.devicesData[i].twoLevelParentName = this.devicesData[i].user.nickname
                        }
                        if (this.devicesData[i].user.level === 3) {
                            this.devicesData[i].threeLevelParentName = this.devicesData[i].user.nickname
                        }
                        if (this.devicesData[i].user.level === 4) {
                            this.devicesData[i].fourLevelParentName = this.devicesData[i].user.nickname
                        }
                        if (this.devicesData[i].user.level === 5) {
                            this.devicesData[i].fiveLevelParentName = this.devicesData[i].user.nickname
                        }
                        if (this.devicesData[i].user.level === 6) {
                            this.devicesData[i].sixLevelParentName = this.devicesData[i].user.nickname
                        }
                        const params = {
                            userId: this.devicesData[i].user.id
                        }
                        viewParents(params).then((res) => {
                            console.log("上级用户信息", res)
                            console.log(this.devicesData[temp].user.id)
                            if (res.code === 0 && res.data.length > 0) {
                                for (var i = 0; i < res.data.length; i++) {
                                    if (this.devicesData[temp].user.level === 2 && res.data[i].level === 1) {
                                        this.devicesData[temp].twoLevelParentName = res.data[i].nickname
                                    }
                                    if (this.devicesData[temp].user.level === 3) {
                                        if (res.data[i].level === 1) {
                                            this.devicesData[temp].oneLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 2) {
                                            this.devicesData[temp].twoLevelParentName = res.data[i].nickname
                                        }
                                    }

                                    if (this.devicesData[temp].user.level === 4) {
                                        if (res.data[i].level === 1) {
                                            this.devicesData[temp].oneLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 2) {
                                            this.devicesData[temp].twoLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 3) {
                                            this.devicesData[temp].threeLevelParentName = res.data[i].nickname
                                        }
                                    }
                                    if (this.devicesData[temp].user.level === 5) {
                                        if (res.data[i].level === 1) {
                                            this.devicesData[temp].oneLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 2) {
                                            this.devicesData[temp].twoLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 3) {
                                            this.devicesData[temp].threeLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 4) {
                                            this.devicesData[temp].fourLevelParentName = res.data[i].nickname
                                        }
                                    }

                                    if (this.devicesData[temp].user.level === 6) {
                                        if (res.data[i].level === 1) {
                                            this.devicesData[temp].oneLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 2) {
                                            this.devicesData[temp].twoLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 3) {
                                            this.devicesData[temp].threeLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 4) {
                                            this.devicesData[temp].fourLevelParentName = res.data[i].nickname
                                        } else if (res.data[i].level === 5) {
                                            this.devicesData[temp].fiveLevelParentName = res.data[i].nickname
                                        }
                                    }
                                }

                                this.$forceUpdate()

                                // for(var i=0;i<res.data.length;i++){
                                //   if(res.data[i].level === 1){
                                //     this.devicesData[i].oneLevelParentName = res.data[i].nickname
                                //   }else if(res.data[i].level === 2){
                                //     this.devicesData[i].twoLevelParentName = res.data[i].nickname
                                //   }else if(res.data[i].level === 3){
                                //     this.devicesData[i].threeLevelParentName = res.data[i].nickname
                                //   }else if(res.data[i].level === 4){
                                //     this.devicesData[i].fourLevelParentName = res.data[i].nickname
                                //   }else if(res.data[i].level === 5){
                                //     this.devicesData[i].fiveLevelParentName = res.data[i].nickname
                                //   }
                                // }
                            }
                            this.itemKey++
                            console.log(this.devicesData)


                        })
                    }

                }
                console.log(this.devicesData[0].alarmList)
            }).catch((err) => {
                console.log('## list error ==>', err)
            })
                .finally(() => {
                    this.loading = false
                })
        },
    }
}
</script>

<style lang="scss">
.app-container {
    background-color: #F3F3F3;
    width: 100%;
    height: calc(100vh - 85px);
    display: flex;
    flex-direction: column;
    padding: 1%;
}
.container{
    background-color: white;
    height: 100%;
    padding: 15px;
    border-radius: 8px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.radio {
    .el-radio__label {
        display: none;
    }
}

// ::v-deep .el-table .el-table__body td .cell:empty::after{
//     content: "-";
//   }
.status-icon {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.c-grey {
    background: grey;
}

.c-green {
    background: green;
}

.c-red {
    background: red;
}

.c-yellow {
    background: yellow;
}

.device-long {
    white-space: nowrap;
}

.item-link {
    cursor: pointer;
    color: #409eff;
}

::v-deep .el-form-item--medium .el-form-item__label {
    font-family: 'HarmonyOS_Sans_SC_Regular';
}
.page {
    display: flex;
    height: 80px;
    width: 100%;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.02);
    bottom: 10px;
    position: absolute;
}

.pageborder {
    margin-right: 10px;
    border: 1px solid #DCDFE6;
    width: 40px;
    height: 36px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

::v-deep .el-input__inner {
    border: solid 1px #333;
}

::v-deep .el-input__inner::-webkit-outer-spin-button:hover{

-webkit-appearance: none;
}

::v-deep .el-input__inner::-webkit-inner-spin-button {

    -webkit-appearance: none;
}

::v-deep .el-input__inner[type='number'] {
    -moz-appearance: textfield;
}


::v-deep .el-form-item--medium .el-form-item__label {
    font-family: 'HarmonyOS_Sans_SC_Regular';
}


</style>